<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{

            height: 100px;
            background-color: #ccc;
        }
        .active{
            background-color: red;
        }
    </style>
    <!-- <script>
        window.onload = function(){
            var list = document.getAnimations('list');
            console.log(list)
        } // 写在这个函数里面
    </script> -->
</head>
<body>
    <h2 id="num">0</h2>
    <button id="good">点赞</button>

    <ul id="list" class="box">
        <li>评论内容—---<button class="del">删除</button></li>
        <li>评论内容—---<button class="del">删除</button></li>
        <li>评论内容—---<button class="del">删除</button></li>
    </ul>
    <button id="publish">发布</button>
    <script>
        //一、 实现 点击 点赞 按钮 数量加1
        // 获取这两个元素
        var num = document.getElementById('num');
        var good = document.getElementById('good');
        good.onclick = function(){
            num.innerText = parseInt(num.innerText) + 1;
        } // 需要转化为整数 不然只能做拼接操作


        // 二、点击 发布 按钮 弹出输入框 输入评论内容 评论列表里加一
        var list = document.getElementById('list');
        var publish = document.getElementById('publish');
        publish.onclick = function(){
            var msg = prompt('请输入评论内容'); //返回值是输入得内容 但是如果点击取消返回值是null，则下一行不应该走
            // if (msg){ //msg != null
            //     list.innerHTML += '<li>'+ msg + '</li>'; //要 += <li>标签
            //     // list.innerHTML = '<li>msg</li>'
            // }      
            msg&&(list.innerHTML += '<li>'+ msg + '</li>')   
            // 短路运算
            // 逻辑与运算符左边的值布尔转换后为true,那么返回右边的值(不管右边的值是真还是假)
            // 如果逻辑与运算符左边的值布尔转换后为false,那么返回左边的值
            // 非零数字和非空字符串转为true 其余是false
        }
            var n = null;
            console.log(Boolean(n)); //false

        //二、拓展
        // setAttribute getAttribut removeAttribute 
        var list = document.getElementById('list');
        var publish = document.getElementById('publish');
        publish.onclick = function(){
            // list.setAttribute('class','') //有class属性但没有值

            list.removeAttribute('class'); // 直接移除class属性 没有class属性

            // 如果有class属性 就删除；如果没有就添加
            if(list.getAttribute('class')){     
                list.removeAttribute('class')
            }else{
                list.setAttribute('class','box')
            }

            // 实现更改class属性 或通过更改class属性来更改list样式
            if(list.getAttribute('class') == 'box'){
                list.setAttribute('class','box active')
            }else{
                list.setAttribute('class','box')
            }
        }

        // 三、添加位置设置 DOM操作（二）
        var list = document.getElementById('list');
        var publish = document.getElementById('publish');
        publish.onclick = function(){
            var li = document.createElement('li'); //创建了节点
            li.innerText = 'hello'
            list.appendChild(li) //将li变量(节点对象)加入list(ul)当中
            console.log(li)
        } //在父节点得最后

        publish.onclick = function(){
            var li = document.createElement('li'); //创建了节点
            li.innerText = 'hello'
            list.insertBefore(li,list.children[0]) //将li变量(节点对象)加入list(ul)当中
            console.log(li)
        } //在子节点前添加

        // 点击删除按钮 删除当前一条评论
        var delBtn = document.getElementsByClassName('del')
        for (var i=0;i<delBtn.length;i++){
            delBtn[i].onclick = function(){
                this.parentNode.parentNode.removeChild(this.parentNode) //删除<li>
            }
        }
        
        publish.onclick = function(){
            // 删除自己
            this.parentNode.removeChild(this);

            // 删除ul
            list.parentNode.removeChild(list);

            // 删除第一个li
            list.removeChild(list.children[0])

            // 添加li
            var li = document.createElement('li');
            li.innerText='hello';
            list.appendChild(li);
            
            // 添加li
            list.innerHTML += '<li>'+'hello'+'</li>'

        }


    </script>
</body>
</html>